<template>
	<view class="setMy" :style="{'min-height': (getH()-44)+'px'}">
		<uni-forms :modelValue="user" class="form" :rules="rules" ref="form">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput placeholder="请输入姓名" v-model="user.name"/>
			</uni-forms-item>
			<uni-forms-item label="性别" required name="sex">
				<radio-group v-model="user.sex" @change="setSex($event)">
					<radio value="男" style="margin: 0 20px;">男</radio>
					<radio value="女" style="margin: 0 20px;">女</radio>
				</radio-group>
			</uni-forms-item>
			<uni-forms-item label="身份证" required name="ID">
				<uni-easyinput placeholder="请输入身份证" v-model="user.ID"/>
			</uni-forms-item>
			<uni-forms-item label="电话" required name="tel">
				<uni-easyinput placeholder="请输入电话" v-model="user.tel"/>
			</uni-forms-item>
			<uni-forms-item label="密码" required name="pwd">
				<uni-easyinput placeholder="请输入密码" v-model="user.pwd" type="password"/>
			</uni-forms-item>
			<uni-forms-item label="生日" required name="birthday">
				<uni-datetime-picker
					type="date"
					:value="user.birthday"
					v-model="user.birthday"
					class="datePicker"
				/>
				<!-- <uni-easyinput placeholder="请选择生日" v-model="user.birthday"/> -->
			</uni-forms-item>
			<uni-forms-item label="住址" required name="address">
				<uni-data-picker
				:localdata="items" 
				v-model="user.address"
				popup-title="请选择住址">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="email" required name="email">
				<uni-easyinput placeholder="请输入Email" v-model="user.email"/>
			</uni-forms-item>
			<uni-forms-item label="支付密码" required name="payPwd">
				<uni-easyinput placeholder="请输入支付密码" v-model="user.payPwd" type="password"/>
			</uni-forms-item>
			<view class="btns">
				<button type="default" @click="cancle()">取消</button>
				<button type="primary" @click="save()">保存</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel:null,
				addShow:false,
				user:{
					name:null,
					sex:null,
					ID:null,
					tel:null,
					pwd:null,
					birthday:null,
					address:null,
					email:null,
					payPwd:null
				},
				rules:{
					name:{
						rules:[
							{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'姓名',
						validateTrigger:'bind'
					},
					sex:{
						rules:[
							{
								required: true,
								errorMessage: '请选择性别',
							}
						]
					},
					ID:{
						rules:[
							{
								required: true,
								errorMessage: '请输入身份证',
							},
							{
								pattern:/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/,
								errorMessage: '身份证格式错误',
							}
							
						]
					},
					tel:{
						rules:[
							{
								required: true,
								errorMessage: '请输入手机号码',
							},
							{
								pattern:/^1[34578][0-9]{9}$/,
								errorMessage: '手机号码格式错误',
							}
						]
					},
					pwd:{
						rules:[
							{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/,
								errorMessage: '密码格式错误',
							}
						]
					},
					birthday:{
						rules:[
							{
								required: true,
								errorMessage: '请选择生日',
							}
						]
					},
					address:{
						rules:[
							{
								required: true,
								errorMessage: '请选择地址',
							}
						]
					},
					email:{
						rules:[
							{
								required: true,
								errorMessage: '请输入邮箱',
							},
							{
								pattern:/^1[34578][0-9]{9}$/,
								errorMessage: '邮箱格式错误',
							}
						]
					},
					payPwd:{
						rules:[
							{
								required: true,
								errorMessage: '请输入支付密码',
							},
							{
								pattern:/^\d{6}$/,
								errorMessage: '支付格式错误',
							}
						]
					}
				},
				dataShow:false,
				items: [{
				          text: "金牛区",
				          value: "1",
				          children: [
				            {
				              text: "a街道",
				              value: "4"
				            },
				            {
				              text: "b街道",
				              value: "5"
				            }
				          ]
				        },
				        {
				          text: "青羊区",
				          value: "2"
				        },
				        {
				          text: "武侯区",
				          value: "3"
				        }]
			}
		},
		methods: {
			getH(){
				return window.screen.height; 
			},
			//取消按钮
			cancle(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 保存按钮
			save(){
				// console.log(this.user)
				// uni.showToast({
				// 	title:"修改成功" 
				// })
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			//设置性别
			setSex(e){
				console.log('type:' + e.detail.value);
				this.user.sex = e.detail.value;
			}
		},
		onLoad({tel}) {
			this.tel=tel
			console.log(this.tel)
		}
	}
</script>

<style scoped lang="scss">
	.setMy{
		padding: 0 10px;
		display: flex;
		align-items: center;
		flex-direction: column;
		background: linear-gradient(to bottom,rgba(235,220,225,0.5),rgba(224,232,235,0.5)) ;
		.form{
			margin-top: 20px;
			
		}
		.btns{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			button{
				padding: 0 30px;
			}
		}
	}
	
</style>
